<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html;charset=UTF-8" encoding="UTF-8">
    <h:head>

    </h:head>

    <h:body>

        <h:form id="form">
            <p:messages id="msgs" showDetail="true">
                <p:autoUpdate/>
            </p:messages>

            <p:dataTable id="datatable" widgetVar="datatable" value="#{dataTable002.lazyDataModel}" var="lang"
                         paginator="true" rows="10" filterEvent="enter"
                         selection="#{dataTable002.selectedProgrammingLanguage}">
                <p:ajax event="rowSelect" listener="#{dataTable002.onRowSelect}"/>

                <p:column field="id" headerText="ID"/>

                <p:column field="name" filterMatchMode="contains"/>

                <p:column field="firstAppeared" filterMatchMode="gte"/>

                <p:column field="type" filterMatchMode="in">
                    <f:facet name="filter">
                        <p:selectCheckboxMenu id="filterType" onchange="PF('datatable').filter()" multiple="true" updateLabel="true">
                            <f:selectItems value="#{dataTable002.types}"/>
                        </p:selectCheckboxMenu>
                    </f:facet>
                </p:column>

                <p:column>
                    <p:commandButton value="Delete" action="#{dataTable002.delete(lang)}" update="datatable" />
                </p:column>
            </p:dataTable>

            <p:commandButton id="buttonSubmit" value="Submit" update="@form" action="#{dataTable002.submit}"/>
            <p:commandButton id="buttonUpdate" value="Update" update="datatable"/>
        </h:form>

    </h:body>
</f:view>

</html>
